{% extends 'base.html' %}
{% load static %}
{% block content %}

<!-- 自定义样式 -->
<style>
    .form-control:focus {
        box-shadow: none;
        border-color: #4e73df;
    }

    .form-label {
        font-weight: 600;
        color: #5a5c69;
    }

    .btn-primary:hover,
    .btn-success:hover {
        transform: translateY(-2px);
        transition: all 0.2s ease-in-out;
    }

    .card {
        border-radius: 1rem;
    }

    .card-header {
        background-color: #4e73df;
        color: white;
        text-align: center;
        font-size: 1.5rem;
        padding: 1.25rem;
        border-radius: 1rem 1rem 0 0;
    }

    .form-floating input,
    .form-floating textarea,
    .form-floating select {
        height: calc(2.5em + 0.75rem + 2px);
    }
</style>

<div class="container py-5">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card shadow-lg border-0">
                <div class="card-header">
                    编辑用户资料
                </div>
                <div class="card-body p-4">

                    <!-- 消息提示 -->
                    {% if messages %}
                        {% for message in messages %}
                            <div class="alert alert-{{ message.tags }} alert-dismissible fade show" role="alert">
                                {{ message }}
                                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                            </div>
                        {% endfor %}
                    {% endif %}

                    <!-- 表单开始 -->
                    <form method="post">
                        {% csrf_token %}

                        <!-- 使用浮动标签布局 -->
                        <div class="row g-3">
                            {% for field in form %}
                                <div class="col-md-12">
                                    <div class="form-floating">
                                        {{ field }}
                                        <label for="{{ field.id_for_label }}" class="form-label">{{ field.label }}</label>
                                        {% if field.help_text %}
                                            <small class="text-muted d-block mt-1">{{ field.help_text }}</small>
                                        {% endif %}
                                        {% if field.errors %}
                                            <small class="text-danger d-block mt-1">{{ field.errors.as_text }}</small>
                                        {% endif %}
                                    </div>
                                </div>
                            {% endfor %}
                        </div>

                        <!-- 提交按钮 -->
                        <div class="d-grid gap-2 mt-4">
                            <button type="submit" class="btn btn-success btn-lg">保存更改</button>
                            <a href="{% url 'dashboard' %}" class="btn btn-outline-secondary">返回首页</a>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

{% endblock %}
